<template>
  <div class="num-layout">
    <div class="right box-border">
      <div class="one">
        <p class="large">
          {{ dispatchQty ? dispatchQty : '/' }}
        </p>
        <p class="text">本周计划产量</p>
      </div>
    </div>
    <div class="right box-border">
      <div class="three">
        <p class="large">{{ reportQty ? reportQty : '/' }}</p>
        <p class="text">本周实际产量</p>
      </div>
    </div>

    <div class="right box-border" style="margin-right: 0;">
      <div class="two">
        <p class="large">
          {{ heGeLv ? heGeLv + '%' : '/' }}
        </p>
        <p class="text">本周合格率</p>
      </div>
    </div>
  </div>
</template>

<script>
import {getMoldOtherApi} from '../../../api/product/index.js'
export default {
  name: 'SumInfo',
  data() {
    return {
      dispatchQty: '',
      heGeLv: '',
      reportQty: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const _that = this
      getMoldOtherApi({pkCorp: 1002}).then(res => {
        const {code,data} = res
        if(code === 2000) {
          console.log('getMoldOtherApi',data)
          _that.dispatchQty = `${data.dispatchQty}`.split('.')[0] || ''
          _that.reportQty = `${data.reportQty}`.split('.')[0] || ''
          _that.heGeLv = data.heGeLv || ''
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.one {
  color: #01c0ff;
}
.two {
  color: #ffa421;
}
.three {
  color: #39fb9e;
}
.four {
  color: #fa563b;
}
.num-layout {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  .right {
    width: 50%;
    height: 16vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    .large {
      flex: 1;
      .px2font(30);
      // color: #68d8fe;
      /* color: #2de3f9; */
      margin-bottom: 2px;
    }

    .text {
      flex: 1;
      // color: #ccc;
      .px2font(14);
    }
  }
}
</style>
